<template>
  <div id="app">
    <!-- 设置顶部导航栏 -->
    <mt-header title="更 多">
      <mt-button icon="back" slot="left" @click="goBack('more')"
        >返回</mt-button
      >
      <mt-button slot="right" @click="goHome">
        <img
          src="../../assets/images/home.png"
          height="20"
          width="20"
          slot="icon"
          style="margin-top: 5px"
        />
      </mt-button>
    </mt-header>

    <!-- 表单区域 -->
    <van-form>
      <van-field
        v-model="userList.name"
        name="name"
        label="姓名"
        placeholder="姓名"
        :rules="[{ required: true, message: '本人姓名' }]"
      />

      <van-field
        v-model="userList.phoneNum"
        type="number"
        name="name"
        label="电话"
        placeholder="本人电话(非必填)"
      />
      <van-field
        type="textarea"
        v-model="userList.msg"
        rows="1"
        autosize
        name="txt"
        label="留言"
        placeholder="请输入留言"
        :rules="[{ required: true, message: '请输入留言' }]"
      />
      <div class="level">
        <p class="innerText">请对服务进行评价:</p>
        <div class="rateItem">
          <van-rate
            v-model="userList.level"
            size="30px"
            icon="like"
            void-icon="like-o"
          />
        </div>
      </div>
    </van-form>

    <div class="BtnClick">
      <van-button
        round
        block
        type="info"
        color="linear-gradient(to right, #26de81, #20bf6b)"
        @click="Btnclick"
        >提交</van-button
      >
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "evaluation",

  data() {
    return {
      //表单数据
      userList: {
        name: "",
        phoneNum: "",
        msg: "",
        level: 0,
      },
    };
  },

  mounted() {},

  methods: {
    goBack(index) {
      this.$router.push({
        path: "./index",
        query: { index },
      });
    },
    goHome() {
      this.$router.push({
        path: "./index",
      });
    },
    //提交Btn
    Btnclick() {
      if (
        this.userList.name == "" ||
        this.userList.msg == "" ||
        this.userList.level == 0
      ) {
        Toast({
          message: "请完整输入信息",
        });
      } else {
        console.log(this.userList);
        /* this.userList.name = "";
        this.userList.phoneNum = "";
        this.userList.msg = "";
        this.userList.level = 0; */
        /* 提交成功 */
        Toast({
          message: "留言成功，感谢评价",
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
#app {
  background-color: #fff;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
#app /deep/ .mint-header-title {
  overflow: initial;
}
.headerImg {
  margin-top: 5px;
}

.BtnClick {
  position: fixed;
  bottom: 0;
  width: 100%;
}
.level {
  .innerText {
    margin-top: 20px;
    padding-left: 16px;
    color: #646566;
    text-align: left;
    font-size: 16px;
    font-weight: 700;
  }
  .rateItem {
    padding-top: 10px;
    text-align: center;
  }
}
</style>